<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scalable=1.0, minimum-scale=1.0">

    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            /*1rem = 100px*/
            font-size: 100px;
        }

        body {
            /*浏览器默认的文字大小一般是 16px*/
            font-size: 16px;
        }

        .container {
            /*width: 100%; body-html-浏览器*/
            min-width: 320px;
            width: 100%;
            max-width: 750px;

            height: 100vh;
            margin: 0 auto;
            background-color: #ccc;
            border: 1px solid red;
        }

        .box {
            /*参照自己的父容器，代表和自己父容器的宽度一致*/
            width: 1rem;
            height: 2rem;
            background: #0f0;
        }

    </style>
</head>
<body>
<div class="container">
    <p> rem 也是一个相对单位，指意思是 rem 参照的 html 根标签的font-size的值。</p>
    <p>页面上其他的元素都是基于 rem 进行参考进行布局，然后我们只需要根据屏幕的尺寸的大小，动态的去修改根 html 的font-size的值，既可以实现等比的缩放效果。</p>
    <p>例如：我们在 375px下面定义一个盒子的大小为：100px*200px 那么这个时候我们设置 375px下 1rem = 100px；那么盒子的大小应该改为 1rem * 2rem</p>
    <p>那么这个时候，如果是到了 750px大小的屏幕下（屏幕放大了一倍，我们的根标签的font-size也需要放大相同的倍数，那么原先哪些基于rem布局的元素也会等比的缩放。），盒子的大小写的还是 1rem *
        2rem，那么如果我们能够修改根html的font-size的值为： 200px，也就是 1rem = 200px ，那么这个时候盒子大小为：200px*400px 实现等比的缩放。</p>
    <div class="box">

    </div>
</div>


</body>
<script type="text/javascript">
    /*现在需要根据不同的显示器的大小，去动态的修改根标签的 font-size值*/
    /*
    * 375px                                    100px(1rem)
    * document.documentElement.clientWidth     ?px(1rem)
    * */
    var fontSize = (document.documentElement.clientWidth * 100 / 375) + 'px';
    document.documentElement.style.fontSize = fontSize;

    window.onresize = function () {
        /*window.onresize当窗口的大小发生变化后，window.onresize事件触发，对应的回调函数执行*/
        console.log('window.onresize', document.documentElement.clientWidth);

        var fontSize = (document.documentElement.clientWidth * 100 / 375) + 'px';
        document.documentElement.style.fontSize = fontSize;

    }
</script>

</html>
